<div id="select-tags" class="select-tags">
    <input id="tags" name="tags" type="hidden" v-model="tags"/>
    <div class="tags-selected">
        <span class="tag-item" v-for="tag in tags" :key="tag">
            <span class="text">{{html "{{tag}}"}}<i class="iconfont icon-close" @click="clickRemoveTag"
                                                    :data-name="tag"></i></span>
        </span>
    </div>
    <input ref="tagInput" class="input" type="text" v-model="inputTag" @input="autocomplete"
           @keydown.delete="removeTag" @keydown.enter="addTag"
           @keydown.32="addTag" @keydown.186="addTag" @keydown.188="addTag"
           @keydown.38="selectUp" @keydown.40="selectDown"
           placeholder="标签（请用逗号分隔每个标签，最多4个，每个最长15字符）">
    <div v-if="autocompleteTags.length > 0" class="autocomplete">
        <div class="ac-container">
            <section class="ac-section">
                <div v-for="(item, index) in autocompleteTags" :key="item" class="ac-item"
                     :class="{active: index === selectIndex}" @click="selectTag(index)" v-text="item"></div>
            </section>
        </div>
    </div>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#select-tags',
    data: {
      inputTag: '',
      tags: [
          {{if .}} {{range .}} '{{.}}', {{end}} {{end}}
      ],
      autocompleteTags: [],
      selectIndex: -1
    },
    mounted() {
    },
    methods: {
      removeTag(event, tag) {
        var selectionStart = this.$refs.tagInput.selectionStart
        if (!this.inputTag || selectionStart === 0) { // input框没内容，或者光标在首位的时候就删除最后一个标签
          this.tags.splice(this.tags.length - 1, 1);
        }
      },

      clickRemoveTag(event) {
        var tag = event.target.dataset.name
        if (tag) {
          var index = this.tags.indexOf(tag)
          if (index !== -1) {
            this.tags.splice(index, 1);
          }
        }
      },

      /**
       * 手动点击选择标签
       * @param index
       */
      selectTag(index) {
        this.selectIndex = index
        this.addTag()
      },

      /**
       * 添加标签
       * @param event
       */
      addTag(event) {
        if (event) {
          event.stopPropagation()
          event.preventDefault()
        }

        if (this.selectIndex >= 0 && this.autocompleteTags.length > this.selectIndex) {
          this._addTag(this.autocompleteTags[this.selectIndex]);
          this.autocompleteTags = [];
          this.selectIndex = -1;
        } else {
          this._addTag(this.inputTag);
        }
      },

      _addTag(tagName) {
        if (!tagName) {
          return;
        }
        if (this.tags.length >= 4) { // 最多四个标签
          return;
        }
        if (tagName.length > 15) { // 每个标签最多15个字符
          return;
        }

        if (this.tags.indexOf(tagName) === -1) {
          this.tags.push(tagName);
        }
        this.inputTag = ''
      },

      autocomplete() {
        this.selectIndex = -1
        if (!this.inputTag) {
          this.autocompleteTags = []
        } else {
          var me = this
          httpPost('/tag/autocomplete', {
            "input": me.inputTag
          }).then(function (data) {
            me.autocompleteTags = []
            if (data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                me.autocompleteTags.push(data[i].name)
              }
            }
          })
        }
      },

      selectUp(event) {
        event.stopPropagation()
        event.preventDefault()
        let curIndex = this.selectIndex
        let maxIndex = this.autocompleteTags.length - 1
        if (maxIndex < 0 || curIndex < 0) {
          // 已经在最顶部
          return
        }
        this.selectIndex--
      },

      selectDown(event) {
        event.stopPropagation()
        event.preventDefault()
        let curIndex = this.selectIndex
        let maxIndex = this.autocompleteTags.length - 1
        if (maxIndex < 0 || curIndex >= maxIndex) {
          // 已经在最底部
          return
        }
        this.selectIndex++
      }
    }
  })
</script>
